import React from "react";
import { Input, Select, InputNumber, Checkbox, Radio, DatePicker } from "antd";
import moment from "moment";
import { isEmpty } from "@cbd/utils";
import { getUploadValue } from "components/customForm/CustomForm";
import CustomUploadField from "../../../components/customUploadField";
import CustomTreeSelectField from "../../../components/customTreeSelectField";

const { TextArea } = Input;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const isTrue = true;

function getNumValue(value) {
  const pattern = /^\d+((\.\d+)|(\.))?$/;
  if (pattern.test(value)) {
    return parseInt(value, 0);
  }
  return value;
}

function getDateValue(dateString) {
  if (!dateString) return null;
  let date = null;
  try {
    date = moment(dateString);
  } catch (e) {
    date = null;
  }
  return date;
}

function getFormProps(item) {
  const {
    type,
    placeholder,
    options = [],
    defaultValue,
    params = {},
    required,
    name,
    value,
  } = item;
  const itemProps = { placeholder };
  const formProps = { rules: [] };

  if (value && options && !isEmpty(options)) {
    if (type === "boolean" && value.map) {
      const newValue = value.map((ele) => {
        const newDValue = options.filter((o) => o.key === ele);
        return newDValue.length > 0 ? newDValue[0].id : ele;
      });
      formProps.initialValue = newValue.length > 0 ? newValue : value || [];
    } else {
      const newValue = options.filter((o) => o.key === value);
      formProps.initialValue = newValue.length > 0 ? newValue[0].id : value;
    }
  } else if (defaultValue && options && !isEmpty(options)) {
    if (type === "boolean" && defaultValue.map) {
      const newDefaultValue = defaultValue.map((ele) => {
        const newDValue = options.filter((o) => o.key === ele);
        return newDValue.length > 0 ? newDValue[0].id : ele;
      });
      formProps.initialValue =
        newDefaultValue.length > 0 ? newDefaultValue : defaultValue || [];
    } else {
      const newDefaultValue = options.filter((o) => o.key === defaultValue);
      formProps.initialValue =
        newDefaultValue.length > 0 ? newDefaultValue[0].id : defaultValue;
    }
  } else {
    formProps.initialValue = value || defaultValue;
    if (type === "boolean") {
      formProps.initialValue = value || defaultValue || [];
    } else if (options.length > 0) {
      itemProps.initialValue = value || defaultValue || undefined;
    }
  }
  if (type === "date") {
    formProps.initialValue = getDateValue(value || defaultValue);
  }
  if (type === "upload") {
    formProps.initialValue = getUploadValue(value || defaultValue);
  }
  if (type === "integer" || type === "decimal") {
    if (params.minLength || params.minLength === 0)
      itemProps.min = params.minLength;
    if (params.maxLength || params.maxLength === 0)
      itemProps.max = params.maxLength;
  }
  if (required) {
    formProps.rules.push({
      required: true,
      message: `${placeholder || `${name}不能为空`}`,
    });
  }

  if (type === "text") {
    formProps.rules.push({ max: 100, message: "请不要输入超过100个字符" });
  }

  if (type === "multi-line-text") {
    formProps.rules.push({ max: 100, message: "请不要输入超过100个字符" });
  }

  return { itemProps, formProps };
}

function getItemByType(item = {}, disabled = false) {
  const { type, placeholder, options = [], defaultValue, params = {} } = item;
  let itemProps = { placeholder };
  if (disabled) {
    itemProps.disabled = true;
    // itemProps.defaultValue = defaultValue;
    if (defaultValue && options && !isEmpty(options)) {
      if (type === "boolean" && defaultValue.map) {
        // 多选
        const newDefaultValue = defaultValue.map((ele) => {
          const newDValue = options.filter((o) => o.key === ele);
          return newDValue.length > 0 ? newDValue[0].id : ele;
        });
        itemProps.value =
          newDefaultValue.length > 0 ? newDefaultValue : defaultValue || [];
      } else {
        const newDefaultValue = options.filter((o) => o.key === defaultValue);
        itemProps.value =
          newDefaultValue.length > 0 ? newDefaultValue[0].id : defaultValue;
      }
    } else {
      itemProps.value = defaultValue;
      if (type === "boolean") {
        itemProps.value = defaultValue || [];
      } else if (options.length > 0) {
        itemProps.value = defaultValue || undefined;
      }
    }
  }
  if (type === "date") {
    itemProps.value = getDateValue(defaultValue);
  }
  if (type === "integer" || type === "decimal") {
    if (params.minLength || params.minLength === 0)
      itemProps.min = params.minLength;
    if (params.maxLength || params.maxLength === 0)
      itemProps.max = params.maxLength;
  }
  if (type === "upload")
    itemProps = { disabled, placeholder, contentpart: true };
  const component = getComponent(item, itemProps, options);
  return component;
}

function getComponent(item, itemProps, options, uploadProps = {}) {
  const { type } = item;
  let component = null;
  switch (type) {
    case "text":
      component = <Input {...itemProps} />;
      break;
    case "multi-line-text":
      component = <TextArea rows={3} {...itemProps} />;
      break;
    case "dropdown":
      component = (
        <Select {...itemProps} style={{ width: "100%" }}>
          {options.map((oitem, index) => (
            <Option key={`${oitem.id} ${index}`} value={oitem.id}>
              {oitem.name}
            </Option>
          ))}
        </Select>
      );
      break;
    case "integer":
      component = (
        <InputNumber
          min={0}
          {...itemProps}
          formatter={(value) => {
            return getNumValue(value);
          }}
          parser={(value) => {
            return getNumValue(value);
          }}
          style={{ width: "100%" }}
        />
      );
      break;
    case "decimal":
      component = (
        <InputNumber
          min={0}
          {...itemProps}
          step={0.1}
          style={{ width: "100%" }}
        />
      );
      break;
    case "boolean": // 多选
      component = (
        <CheckboxGroup style={{ width: "100%" }} {...itemProps}>
          {options.map((oitem, index) => (
            <Checkbox key={`${oitem.id} ${index}`} value={oitem.id}>
              {oitem.name}
            </Checkbox>
          ))}
        </CheckboxGroup>
      );
      break;
    case "radio-buttons": // 单选
      component = (
        <RadioGroup style={{ width: "100%" }} {...itemProps}>
          {options.map((oitem, index) => (
            <Radio key={`${oitem.id} ${index}`} value={oitem.id}>
              {oitem.name}
            </Radio>
          ))}
        </RadioGroup>
      );
      break;
    case "date": // 日期
      component = (
        <DatePicker
          {...itemProps}
          format="YYYY-MM-DD"
          style={{ width: "100%" }}
        />
      );
      break;
    case "upload": // 文件上传
      component = (
        <CustomUploadField
          uploadProps={uploadProps}
          params={item || {}}
          itemProps={itemProps}
        />
      );
      break;
    case "userRadio": // 人员单选
      component = (
        <CustomTreeSelectField itemProps={itemProps} multiple={false} />
      );
      break;
    case "functional-group": // 人员多选
      component = (
        <CustomTreeSelectField itemProps={itemProps} multiple={isTrue} />
      );
      break;
    default:
      break;
  }
  return component;
}

export { getItemByType, getComponent, getFormProps };
